<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04.事件.html</title>
    <script>
        /*
         事件： 事件三要素
           1、 事件源 ：事件要触发的标签
           2、 事件名称： 类型 onclick
           3、 事件行为： 触发的函数
         事件注册的方式：
            1. 直接在标签上注册
            2. 直接获取节点 通过节点挂载事件
        */
     
        function handlerCliceMe(obj) {
            console.log(obj);
            // alert("123")
        }
    </script>
</head>

<body>

    <!-- <button onclick="handlerCliceMe.call(this);">点击我-方式一</button> -->
    <button onclick="handlerCliceMe(this);">点击我-方式一</button>
    <br>
    <button id="btnNode">点击我-方式二</button>
    <br>
    <button id="btnNode02">点击我-方式三</button>
    <script>
        // 直接挂载事件函数
        btnNode.onclick = function () {
            // console.log(this);
            this.style.backgroundColor = 'red';
            //alert("123")
        }

        // 通过监听进行事件捕获
        btnNode02.addEventListener("click",function(){
            // alert("123")
            this.style.backgroundColor = 'blue';
        })
    </script>
</body>

</html>